<template>
    <div>
        <van-nav-bar title="注册页面" left-text="返回" left-arrow @click-left='goBack' />
        <div class="register-panel">
            <van-field v-model="username" label="用户名" icon="clear" placeholder="请输入用户名" required @click-icon="username=''" />
            <van-field v-model="password" label="密码" placeholder="请输入密码" required />
            <div class="register-button">
                <van-button type="primary" :loading="openLoading" size="large" @click="registerAction">马上注册</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import url from '@/serviceAPI.config.js'
    import {Toast} from 'vant'
    export default {
        data() {
            return {
                username: '',
                password: '',
                openLoading:false,  //是否开启用户的loading
                usernameErrorMsg: '',
                passwordErrorMsg: ''
            }
        },
        methods: {
            goBack(){
                this.$router.go(-1)
            },
            axiosRegisterUser(){
                axios({
                    url: url.registerUser,
                    method: "post",
                    data: {
                        userName: this.username,
                        password: this.password
                    }
                })
                .then(response => {
                    if(response.data.code == 201){
                        Toast.success("注册成功")
                        this.$router.push("/")
                    }else{
                        Toast.fail("注册失败")
                        this.openLoading = false
                    }
                })
                .catch((error)=>{
                    Toast.fail("注册失败")
                    this.openLoading = false
                })
            },
            registerAction(){
                if(this.checkForm()){
                    this.axiosRegisterUser()
                }
            },
            checkForm(){
                let isOk = true
                if(this.username.length < 5){
                    isOk = false
                    this.usernameErrorMsg = '用户名不能小于5位'
                }else{
                    this.usernameErrorMsg = ''
                }

                if(this.password.length < 6){
                    this.passwordErrorMsg = "密码不能少于6位"
                    isOk = false
                }else{
                    this.passwordErrorMsg = ""
                }
                return isOk
            }
        }
    }
</script>

<style scoped>

</style>